<template>
    <!-- 查看自己的帖子头部 -->
    <view class="my-post-view-header">
        <!-- 返回箭头 -->
        <view class="nav-left" @click="handleBack">
            <han-icon name="return" size="36" />
        </view>

        <view class="user-info">
            <image :src="userData.avatarUrl" class="user-avatar" />
            <view class="user-name">{{ userData.username }}</view>
        </view>

        <view class="more-settings">
            <han-icon name="more_settings" size="36" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/stores/userStores';

const props = defineProps({
    userData: {
        type: Object,
        required: true
    }
});

const userData = props.userData;

// 跳回上次一页
const handleBack = () => {
    uni.navigateBack({
        delta: 1
    });
};
</script>

<style lang="scss">
.my-post-view-header {
    height: $han-nav-bar-height;
    border-bottom: 1rpx solid $han-global-border-color;
    padding: 0 20rpx;
    display: flex;
    align-items: center;

    .nav-left {
        width: 50rpx;
    }

    .user-info {
        display: flex;

        .user-avatar {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            border: 1rpx solid $han-global-border-color;
        }

        .user-name {
            margin: auto;
            margin-left: 20rpx;
        }
    }

    .more-settings {
        margin-left: auto;
        width: 50rpx;
    }
}
</style>
